<!DOCTYPE html>
<html>
<head>
  <title>rem test</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <style type="text/css">

  html {
    font-size : 14px;
    font-family: 'Helvetica Neue', 'Helvetica', 'Microsoft Yahei', 'sans-serif';
  }

  @media only screen and (min-width: 401px){
    html {
      font-size: 25px !important;
    }
  }

  @media only screen and (min-width: 428px){
    html {
      font-size: 26.75px !important;
    }
  }
  @media only screen and (min-width: 481px){
    html {
      font-size: 30px !important; 
    }
  }
  @media only screen and (min-width: 569px){
    html {
      font-size: 35px !important; 
    }
  }
  @media only screen and (min-width: 641px){
    html {
      font-size: 40px !important; 
    }
  }

  p {
    font-size: 1rem;
  }

  </style>
</head>
<body>

<p>hello world</p>

</body>
<script type="text/javascript">

// alert(window.innerWidth);

// 使用 JavaScript 控制 font-size
// 判断如果是QQ内核，不做任何处理
// alert(navigator.userAgent);
if(navigator.userAgent.match(/QQ/)) {

  // 以 iphone 6 的切图配置
  document.getElementsByTagName('html')[0].style.fontSize = '10px';
}
else {

  let dpr = window.devicePixelRatio;
  let wd = document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth || window.screen.width;
  
  // alert(`${wd}|${dpr}`);
  document.getElementsByTagName('html')[0].style.fontSize = (wd * dpr ) / 37.5 + 'px';  // 375宽 font-size: 20px;
}


let meta = document.createElement("meta");
meta.setAttribute("name", "viewport");
meta.setAttribute('content', 'width=device-width,initial-scale=' + 1/dpr + ', maximum-scale=' + 1/dpr + ', minimum-scale=' + 1/dpr + ', user-scalable=no');
document.head.appendChild(meta);
</script>
</html>